<template>
  <div class="coupon auditCmpt">
    <!-- {{carrier}} -->
    <!-- 查询表单 -->
    <div class="form-baseinfo">
      <LPSearchBar
        v-model="searchModel"
        :search-data="searchData"
        label-width="100px"
        @handleSearchSubmit="handleSearchSubmit"
        @handleSearchReset="handleSearchReset"
      />
    </div>
    <!-- 表格列表 -->
    <div class="form-baseinfo">
      <div class="btn_area">
        <el-button
          v-hasPermi="['LaborProtection.CouponRecord.Delete']"
          size="medium"
          type="primary"
          @click="deleteCouponRecord"
          >删除</el-button
        >
      </div>
      <LPTablePage
        ref="multipleTable"
        :show-index="true"
        :show-indexfixed="false"
        index-label="序号"
        selection
        :table-data="tableData"
        :table-column="tableColumn"
        :total="total"
        :current-page="currentPage"
        align="center"
        @handleSizeChange="handleSizeChange"
        @handleSelectionChange="handleSelectionChange"
        @handleCurrentChange="handleCurrentChange"
      >
        <template slot="rate" slot-scope="{ row }">
          <div>{{ row.rate == 1 ? '周期性发放' : '单次发放' }}</div>
        </template>
        <template slot="enabledMark" slot-scope="{ row }">
          <div>{{ row.enabledMark == 1 ? '启用' : '禁用' }}</div>
        </template>
        <template slot="startTime" slot-scope="{ row }">
          <div>{{ row.startTime + '--' + row.endTime }}</div>
        </template>
        <template slot="recordCount" slot-scope="{ row }">
          <div v-if="row.recordCount == 0">未使用</div>
          <div v-else>使用中</div>
        </template>
        <template slot="recordMaterials" slot-scope="{ row }">
          <el-link type="primary" @click="couponDetail(row.couponRecordMaterials)">查看详情</el-link>
        </template>
        <template slot="cz" slot-scope="{ row }">
          <el-button type="text" @click="">编辑</el-button>
          <el-button
            v-if="row.enabledMark == 1"
            style="color: #f56c6c"
            type="text"
            @click="handleDoEnabled(row, '禁用')"
            >禁用</el-button
          >
          <el-button v-else type="text" @click="handleDoEnabled(row, '启用')">启用</el-button>
          <el-button style="color: #f56c6c" type="text" @click="handleDelete(row)">删除</el-button>
        </template>
      </LPTablePage>
    </div>
    <el-dialog
      class=""
      :title="dialogTitle"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="dialogClose"
      :visible.sync="couponDialog"
      width="1080px"
      style="margin-top: -100px"
    >
      <LPTablePage
        :show-page="false"
        :show-index="true"
        index-label="序号"
        :show-indexfixed="false"
        :table-data="couponDetailTable"
        :table-column="couponDetailTableColumn"
        max-height="550"
        align="center"
      >
        <template slot="smallCategoryNo" slot-scope="{ row }">
          <div v-if="row.level >= 3">{{ row.smallCategoryNo }}</div>
          <div v-else />
        </template>
        <template slot="smallCName" slot-scope="{ row }">
          <div v-if="row.level >= 3">{{ row.smallCName }}</div>
          <div v-else />
        </template>
        <template slot="materialCode" slot-scope="{ row }">
          <div v-if="row.level == 4">{{ row.materialCode }}</div>
          <div v-else />
        </template>
        <template slot="materialName" slot-scope="{ row }">
          <div v-if="row.level == 4">{{ row.materialName }}</div>
          <div v-else />
        </template>
        <template slot="countQuantity" slot-scope="{ row }">
          <div>{{ parseInt(row.count) - parseInt(row.quantityUsedCount) }}</div>
        </template>
      </LPTablePage>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogClose">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCouponRecord, deleteCouponRecord, doEnabledCoupon } from '@/api/LaborProtection/couponRecord'
import { parseTime } from '@/utils/lpUtils.js'
import LPTablePage from '@/components/LPTablePage/index.vue'
import LPSearchBar from '@/components/LPSearchBar/index.vue'

export default {
  name: 'Coupon',
  components: {
    LPSearchBar,
    LPTablePage
  },
  data() {
    return {
      searchModel: {},
      searchData: [
        { label: '', placeholder: '部门', prop: 'departmentName' },
        { label: '', placeholder: '岗位', prop: 'postName' },
        { label: '', placeholder: '优惠券名称', prop: 'couponName' },
        { label: '', placeholder: '员工工号', prop: 'userJobNo' },
        { label: '', placeholder: '员工姓名', prop: 'userName' },
        {
          label: '',
          placeholder: '状态',
          prop: 'state',
          type: 'select',
          option: [
            { value: '1', label: '未生效' },
            { value: '2', label: '已生效' },
            { value: '3', label: '过期' }
          ]
        },
        {
          label: '',
          placeholder: '使用状态',
          prop: 'usedType',
          type: 'select',
          option: [
            { value: '1', label: '未使用' },
            { value: '2', label: '使用中' }
          ]
        },
        { label: '', prop: 'StartOrderTime', type: 'datetimerange', placeholder: '开始时间', width: '100px' }
      ],
      selectionList: [],
      // 列表数据
      tableData: [],
      // 表格字段
      tableColumn: [
        { label: '发放记录编号', prop: 'id' },
        { label: '员工工号', prop: 'userJobNo' },
        { label: '员工姓名', prop: 'userName' },
        { label: '卡号', prop: 'userCardNo' },
        { label: '发放频率', prop: 'rate', render: true },
        { label: '部门', prop: 'departmentName' },
        { label: '岗位', prop: 'postName' },
        { label: '优惠券名称', prop: 'couponName' },
        { label: '优惠券有效时间', prop: 'startTime', render: true, width: '300' },
        { label: '优惠券内容', prop: 'recordMaterials', render: true },
        { label: '状态', prop: 'stateName' },
        { label: '使用状态', prop: 'recordCount', render: true },
        { label: '创建时间', prop: 'createDate' }
        // { label: "操作", prop: "cz", render: true },
      ],
      couponDetailTable: [],
      couponDetailTableColumn: [
        { label: '物料大类', prop: 'largeCName' },
        { label: '中类编码', prop: 'middleCName' },
        { label: '物料中类', prop: 'middleCategoryNo' },
        { label: '小类编码', prop: 'smallCategoryNo', render: true },
        { label: '物料小类', prop: 'smallCName', render: true },
        { label: '物料编码', prop: 'materialCode', render: true },
        { label: '物料名称', prop: 'materialName', render: true },
        { label: '数量', prop: 'count' },
        { label: '使用数量', prop: 'quantityUsedCount' },
        { label: '剩余数量', prop: 'countQuantity', render: true }
      ],
      rules: {
        name: [{ required: true, message: '请输入优惠券名称', trigger: 'bulr' }],
        departmentIds: [{ required: true, message: '请选择部门', trigger: 'change' }]
      },
      dialogTitle: '使用情况',
      couponDialog: false,
      total: 0,
      currentPage: 1,
      pageSize: 10
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    dialogClose() {
      this.couponDialog = false
      this.couponDetailTable = []
    },
    couponDetail(row) {
      console.log(row)
      this.couponDetailTable = row
      this.couponDialog = true
    },
    // 查询按钮
    handleSearchSubmit() {
      this.currentPage = 1
      this.getList()
    },
    // 重置按钮
    handleSearchReset() {
      this.handleSearchSubmit()
    },
    handleSizeChange(v) {
      this.pageSize = v
      this.currentPage = 1
      this.getList()
    },
    handleCurrentChange(v) {
      this.currentPage = v
      this.getList()
    },
    handleDoEnabled(row, title) {
      this.$confirm(`是否${title}该条信息, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          const data = [row]
          doEnabledCoupon(data).then((res) => {
            this.$notify({
              title: '操作',
              message: `${title}成功`,
              type: 'success'
            })
            this.getList()
          })
        })
        .catch(() => {
          this.$notify({
            title: '操作',
            message: `已取消${title}`,
            type: 'info'
          })
        })
    },
    deleteCouponRecord(row) {
      if (this.selectionList.length == 0) return this.$message.warning('请先勾选需要删除的数据')
      this.$confirm(
        '删除优惠券发放记录，会导致【人员金额发放标准】统计中该发放日期的未充值金额减少，请确认无误后删除?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          const data = [...this.selectionList]
          deleteCouponRecord(data).then((res) => {
            this.$notify({
              title: '操作',
              message: '删除成功',
              type: 'success'
            })
            this.selectionList = []
            this.getList()
            this.$refs.multipleTable.clearSelection()
            this.$forceUpdate()
          })
        })
        .catch(() => {
          this.$notify({
            title: '操作',
            message: '已取消删除',
            type: 'info'
          })
        })
    },
    handleSelectionChange(chooseList) {
      this.selectionList = chooseList
    },
    getList() {
      const params = {
        ...this.searchModel,
        SkipCount: this.currentPage,
        MaxResultCount: this.pageSize
      }
      if (typeof this.searchModel.StartOrderTime !== 'undefined') {
        params.validStart_BeginTime = parseTime(this.searchModel.StartOrderTime[0])
        params.validStart_EndTime = parseTime(this.searchModel.StartOrderTime[1])
        this.$delete(params, 'StartOrderTime')
      }
      getCouponRecord(params).then((res) => {
        if (!res.error) {
          this.tableData = res.items
          this.total = res.totalCount
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.auditCmpt {
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;

  .form-baseinfo:first-child {
    margin: 20px, 0, 20px, -10px;
    border-radius: 3px;
  }
  .btn_area {
    padding: 0.2rem;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background-color: #fff;
  }
}

::v-deep .search-bar input.el-input__inner {
  width: 1.5rem;
}

.formStyle {
  ::v-deep {
    .el-input__inner[style='height: 36px;'] {
      height: 34px !important;
    }
  }
}
</style>
